<!DOCTYPE html>
<html>
<head>
    <title>Diagrama de Óptica Física</title>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Estilos y Configuración ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '20px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Coordenadas Geométricas ---
    const A = { x: 350, y: 250 };
    const B = { x: 200, y: 100 };
    const C = { x: 200, y: 400 };
    const D = { x: 200, y: 175 }; // Punto en BC

    // --- Funciones de Dibujo ---

    function drawTriangle() {
        ctx.beginPath();
        ctx.moveTo(A.x, A.y);
        ctx.lineTo(B.x, B.y);
        ctx.lineTo(C.x, C.y);
        ctx.closePath();
        ctx.stroke();
    }

    function drawLabels() {
        ctx.fillText('A', A.x + 20, A.y);
        ctx.fillText('B', B.x, B.y - 20);
        ctx.fillText('C', C.x, C.y + 20);
        ctx.fillText('D', D.x - 20, D.y + 5);
        ctx.fillText('n', 240, 300);
        ctx.fillText('图 1', 250, 470);
    }

    function drawRightAngleSymbol() {
        const size = 15;
        // Calcular los puntos para el símbolo del cuadrado en el vértice A
        const p_on_AB = { x: A.x - size / Math.sqrt(2), y: A.y - size / Math.sqrt(2) };
        const p_on_AC = { x: A.x - size / Math.sqrt(2), y: A.y + size / Math.sqrt(2) };
        const corner = { x: A.x - 2 * size / Math.sqrt(2), y: A.y };

        ctx.save();
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(p_on_AB.x, p_on_AB.y);
        ctx.lineTo(corner.x, corner.y);
        ctx.lineTo(p_on_AC.x, p_on_AC.y);
        ctx.stroke();
        
        ctx.font = '16px Arial';
        ctx.fillText('90°', A.x - 40, A.y);
        ctx.restore();
    }

    function drawIncidentRay() {
        const startX = 80;
        // Línea principal del rayo
        ctx.beginPath();
        ctx.moveTo(startX, D.y);
        ctx.lineTo(D.x, D.y);
        ctx.stroke();

        // Punta de flecha sólida
        const arrowSize = 10;
        ctx.beginPath();
        ctx.moveTo(D.x, D.y);
        ctx.lineTo(D.x - arrowSize, D.y - arrowSize / 2);
        ctx.lineTo(D.x - arrowSize, D.y + arrowSize / 2);
        ctx.closePath();
        ctx.fill();
    }

    function drawNormalAndAngle() {
        // Línea normal (discontinua)
        const normal_len = 60;
        const normal_angle_rad = -30 * Math.PI / 180; // 30 grados hacia arriba desde la horizontal
        const normal_end = {
            x: D.x + normal_len * Math.cos(normal_angle_rad),
            y: D.y + normal_len * Math.sin(normal_angle_rad)
        };
        ctx.save();
        ctx.setLineDash([5, 4]);
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(D.x, D.y);
        ctx.lineTo(normal_end.x, normal_end.y);
        ctx.stroke();
        ctx.restore();

        // Arco del ángulo
        const arc_radius = 40;
        ctx.save();
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc(D.x, D.y, arc_radius, normal_angle_rad, 0);
        ctx.stroke();
        ctx.restore();

        // Etiqueta del ángulo "30°"
        const label_angle_rad = -15 * Math.PI / 180;
        const label_radius = 22; // Ajustado para una mejor colocación
        const label_pos = {
            x: D.x + label_radius * Math.cos(label_angle_rad),
            y: D.y + label_radius * Math.sin(label_angle_rad)
        };
        ctx.save();
        ctx.font = '18px Arial';
        ctx.fillText('30°', label_pos.x, label_pos.y);
        ctx.restore();
    }

    // --- Ejecución Principal del Dibujo ---
    drawTriangle();
    drawLabels();
    drawRightAngleSymbol();
    drawIncidentRay();
    drawNormalAndAngle();

</script>

</body>
</html>